import React, { Component } from 'react'
import ListTime from '../components/ListTime.js'
import Img from '../components/Img.js'


const sub_list_data = [
    {
        img: 'list1.jpg',
        title: '用于构建用户界面的 JavaScript 库',
        des: '组件逻辑使用 JavaScript 编写而非模版，你可以轻松地在应用中传递数据，并使得状态与 DOM 分离',
    },
    {
        img: 'list4.jpg',
        title: '渐进式的JavaScript 框架',
        des: '不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩',
    },
    {
        img: 'list1.jpg',
        title: '一套框架多种平台 移动端&桌面端',
        des: '学会用 Angular 构建应用，把这些代码和能力复用在多种不同平台的应用上',
    },
    {
        img: 'list2.jfif',
        title: '用于构建用户界面的 JavaScript 库',
        des: '组件逻辑使用 JavaScript 编写而非模版，你可以轻松地在应用中传递数据，并使得状态与 DOM 分离',
    },
    {
        img: 'list3.jpg',
        title: '渐进式的JavaScript 框架',
        des: '不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩',
    }
];

export default class List extends Component {
    constructor(p) {
        super(p)
        this.state = {
            sub_list_data
        }
    }
    render() {
        return (
            <div className='sub-list'>
                <div className='area-header'>
                    <Img src={'zs.jpg'}></Img>最新推荐</div>
                {
                    this.state.sub_list_data.map((item, index) => {
                        return (
                            <div key={index}>
                                <ListTime item={item}></ListTime>
                            </div>
                        )
                    })
                }
            </div >
        )
    }
}

